<template>
  <div>
    <div>
      <div class="header">
        <van-tabs
          v-model:active="active"
          active-color="#ef8642"
          :placeholder="true"
          @click-tab="fn"
        >
          <van-tab v-for="item in circleList" :title="item.name" :key="item">
          </van-tab>
          <div class="icon">
            <van-icon name="search" class="icon" />
          </div>
        </van-tabs>
      </div>
    </div>

    <circle-info :msg="flag"></circle-info>
  </div>
</template>

<script>
import { Tab, Tabs, Icon } from "vant";

import { ref } from "vue";

import circleInfo from "./Circle/Recommend.vue";

export default {
  components: {
    VanTab: Tab,
    VanTabs: Tabs,
    VanIcon: Icon,
    circleInfo: circleInfo,
  },
  setup() {
    const flag = ref(1);
    const active = ref(1);
    const circleList = ref([
      {
        name: "关注",
        // url: "/home/circle/focus",
      },
      {
        name: "推荐",
        // url: "/home/circle/recommend",
      },
      {
        name: "话题",
        // url: "/home/circle/topic",
      },
      {
        name: "社团",
        // url: "/home/circle/organization",
      },
      {
        name: "绘画",
        // url: "/home/circle/painting",
      },
      {
        name: "音乐",
        // url: "/home/circle/music",
      },
    ]);
    const fn = () => {
      flag.value += 1;
    };
    return {
      active,
      circleList,
      fn,
      flag,
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 375px;
  height: 50px;
  background: #ffffff;
  box-shadow: 0px 6px 10px 0px rgba(51, 51, 51, 0.1);
  background-color: #fff;
  position: fixed;
  top: 0;
}
.van-tabs__wrap {
  position: relative;
}
.icon {
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 6px;
  margin-left: 6px;
}
.van-tabs {
  padding-left: 30px;
}
</style>
